import React, { Component } from 'react'
import { Button, Text } from 'react-native'
import { InputItem, List, Picker } from 'antd-mobile'
import { createForm } from 'rc-form'
import { Icon } from '../components'

@createForm()
export class RegisterForm extends Component {
  render = () => (
    <List>
      <InputItem
        clear
        type="text"
        placeholder="Username"
        error={this.props.form.getFieldError('username')}
        {...this.props.form.getFieldProps('username', {
          rules: [{ required: true }],
        })}
      >
        <Icon name="person" color="darkgray" />
      </InputItem>

      <InputItem
        clear
        type="password"
        placeholder="Password"
        error={this.props.form.getFieldError('password')}
        {...this.props.form.getFieldProps('password', {
          rules: [{ required: true }],
        })}
      >
        <Icon name="lock" color="darkgray" />
      </InputItem>

      <InputItem
        clear
        type="text"
        placeholder="Display Name"
        error={this.props.form.getFieldError('name')}
        {...this.props.form.getFieldProps('name', {
          rules: [{ required: true }],
        })}
      >
        <Icon name="ribbon" color="darkgray" />
      </InputItem>

      <List.Item>
        <Button
          title="Register"
          onPress={() =>
            this.props.form.validateFields((error, data) => {
              if (!error) this.props.onSubmit({ ...data, role: 'CUSTOMER' })
            })
          }
        />
      </List.Item>
    </List>
  )
}
